<template>
	<div style="background-color: #fff;min-height: 100vh;color: #fff;">

		<div class="imgs" :style="'background-image: url('+ imgHttp +'/test/bg/page2_bg.jpg);z-index: 0;'"></div>
		<div style="position: absolute;left: 0;right:0;top: 0;right: 0;z-index:1;">
			<div style="position: relative;height:4em;overflow: hidden;z-index: 1;">
				<div style="position:absolute;top: 0;left: 0;right: 0;height: 7em;background-color: #fff;opacity: 0.5;">
				</div>
				<div style="position: absolute;left: 1.0em;top: 0px;">
					<image :src="imgHttp + '/test/bg/logo.png'" style="height: 4em;width: 7em;"></image>
				</div>
			</div>
			<div @click="toIndex" style="display: flex;justify-items: center;margin: 0.5em;">
				<div>
					<image :src="imgHttp + '/test/back.png'" style="width: 1.5em;height:1.5em;"></image>
				</div>
				<div style="font-size: 1em;">返回首页</div>
			</div>
			<div style="text-align: center;font-size: 1.5em;margin-bottom: 1.0em;margin-top: 1.2em;">质保查询</div>
			<div class="row" style="margin-top: 0;background-color: #000;">
				<div class="inputlable" style="margin-left: 1em;">请输入手机号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quPhone" placeholder="请输入请输入手机号" class="inputText" />
				</div>
				<div style="float: left;margin-left: 1em;">
					<button
						style="width: 5em;height: 2.0em;line-height: 1.8em;font-size: 1.0em;border:1px solid red;background-color: #000;color: #fff;"
						@click="serch">查询</button>
				</div>
				<div class="clear"></div>
			</div>
			<div style="background-color: #fff;padding: 0.5em;margin-top: 0.5em;">
				<uni-forms-item label="分类" required style="display: flex;flex-direction: column;">
					<uni-data-checkbox v-model="obj.quTypeId" :localdata="sexs" />
				</uni-forms-item>
			</div>
			<div style="color: #fff;margin-left: 1.5em;margin-right: 1.5em;margin-top: 2em;">
				&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;
				提醒您，电子质保是唯一官方正品凭证， 请您在品牌正规授权门店装贴。
				您可扫码关注官方小程序，输入登记的车牌号、车架号或手机号码查询。
			</div>
		</div>

	</div>
</template>

<script>
	import api from '@/common/httprequest.js'
	export default {
		data() {
			return {
				imgHttp: api.getImgUrl(),
				obj: {
					quPhone: null,
					quTypeId: 100
				},
				sexs: [{
					text: '漆面膜',
					value: 100
				}, {
					text: '改色膜',
					value: 101
				}, {
					text: '太阳膜',
					value: 102
				}, {
					text: '窗膜',
					value: 124
				}],
			}
		},
		onLoad() {

		},
		mounted() {

		},
		methods: {
			toIndex() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			serch() {
				/*
				uni.redirectTo({
					url:'/pages/jmd/zbdisplay'
				})
				*/
				if (this.obj.quPhone == null) {
					uni.showToast({
						icon: 'error',
						duration: 1000,
						title: '手机号不能为空！'
					})
					return;
				}
				uni.showLoading({
					title: '数据处理中...'
				});
				api.request({
					method: "GET",
					url: "/applet/guarantee/select",
					params: {
						"quPhone": this.obj.quPhone,
						"quTypeId": this.obj.quTypeId
					},
				}).then(res => {
					uni.hideLoading();
					console.log('resultData', res);
					if (res.code == 200) {
						const jsonStr = JSON.stringify(res.data);
						uni.redirectTo({
							url: '/pages/jmd/zbdisplay?data=' + encodeURIComponent(jsonStr)
						})
					}
				});
			}
		}
	}
</script>

<style>
	.inputright {
		float: left;
		margin-left: 0.5em;
		width: calc(100% - 13em);
	}

	.inputlable {
		float: left;
		min-width: 6em;
		/*background-color: #F5F5F5;*/
		text-align: right;
		font-size: 0.8em;
		line-height: 2.2em;
	}

	.row {
		text-align: center;
		font-size: 1.0em;
		margin-top: 0.3em;
		overflow: hidden;
	}

	.inputText {
		text-align: left;
		height: 2.3em;
		line-height: 2.3em;
		border: 1px solid #FF0000;
		font-size: 0.8em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		width: 100%;
	}

	.clear {
		clear: both;
	}

	.imgs {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-position: center center;
		/* 水平居中和垂直居中 */
		background-size: cover;
		/* 可选，根据需要调整 */
		background-repeat: no-repeat;
		/* 防止背景图片重复 */
	}
</style>